<template>
    <div class="write-form">
      <div class="title">
        <h3>给我留言</h3>
      </div>

      <Alert show-icon class="g-ml80">An info prompt</Alert>
      <i-form :model="formItem" :label-width="80">
        <FormItem label="主题">
          <i-input v-model="formItem.title" placeholder="Enter something..."></i-input>
        </FormItem>
        <FormItem label="Text">
          <Input v-model="formItem.text" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="联系姓名">
          <i-input v-model="formItem.name" placeholder="Enter something..."></i-input>
        </FormItem>
        <FormItem label="联系电话">
          <i-input v-model="formItem.phone" placeholder="Enter something..."></i-input>
        </FormItem>
        <FormItem label="联系电话">
          <i-input v-model="formItem.phone" placeholder="Enter something..."></i-input>
        </FormItem>
        <FormItem label="联系电话">
          <i-input v-model="formItem.phone" placeholder="Enter something..."></i-input>
        </FormItem>
        <FormItem>
          <Button type="primary">Submit</Button>
          <Button type="ghost" style="margin-left: 8px">Cancel</Button>
        </FormItem>
      </i-form>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
      data () {
        return {
          formItem: {
            title: '',
            test: '',
            name: '',
            phone: ''
          }
        }
      },

      components: {
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .write-form
    width: 90%
    margin: 20px auto 0
    padding: 20px 60px 20px 20px
    background-color: #fff
    br(4px)
    box-shadow: 0 0 10px 1px #aaa
    .title
      h3
        hh(30px)
        margin-bottom: 10px
        sc($font-medium-x, $back)
        text-align: center
        font-weight: bold
        font-family: "微软雅黑"
</style>
